<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin: 20px;
        }

        p {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="div1">
        <p draggable="true" id="pt">11111111111</p>
    </div>
    <div id="div2">

    </div>


    <script>

        /*应用于被拖拽元素的事件
     *ondrag         应用于拖拽元素，整个拖拽过程都会调用--持续
      ondragstart    应用于拖拽元素，当拖拽开始时调用
      ondragleave    应用于拖拽元素，当鼠标离开拖拽元素时调用
      ondragend    应用于拖拽元素，当拖拽结束时调用*/

        var pt = document.querySelector("#pt");
        pt.ondragstart = function () {
            console.log(0000000000);
        }
        pt.ondragend = function () {
            console.log(1111111111);
        }
        pt.ondragleave = function () {
            console.log(22222222222222);
        }
        pt.ondrag = function () {
            console.log(33333333333);
        }


        /*应用于目标元素的事件
       *ondragenter    应用于目标元素，当拖拽元素进入时调用
        ondragover    应用于目标元素，当停留在目标元素上时调用
        ondrop        应用于目标元素，当在目标元素上松开鼠标时调用
        ondragleave    应用于目标元素，当鼠标离开目标元素时调用*/
        var dv = document.querySelector("#div2");
        dv.ondragenter = function () {
            console.log("aaaaaaaaaaa");

        }
        dv.ondragover = function (e) {
            console.log("bbbbbbbbbbbbb");
            e.preventDefault();

        }
        dv.ondragleave = function () {
            console.log("cccccccccccccccc");

        }
        dv.ondrop = function () {
            // appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
            // 提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
            dv.appendChild(pt)
            console.log("ddddddddddddddddddddddd");

        }


    </script>




</body>

</html>